<template>
    <div class="messageCard flex8">
<TmessageCard v-for="(item,index) in messageData" :color="item.color" :icon="item.icon">
    <template v-slot:title>
        {{ item.title }}
    </template>
    <template v-slot:num>
{{item.num}}
    </template>
</TmessageCard>

    </div>
</template>

<script setup lang="ts">
import TmessageCard from "./component/messageCard.vue";
import { reactive } from "vue";
let messageData=reactive([
{
    title:'居民总数量',
    num:'11,000',
    color:'#2984f8',
    icon:'icon-a-jianzhugongsi',
},
{
    title:'签约居民数量',
    num:'56,000',
    color:'#15d6ba',
    icon:'icon-gerenxinxi',
},
{
    title:'待处理服务量',
    num:'11,000',
    color:'#ffc71c',
    icon:'icon-a-youjianxinjian',
},
{
    title:'已完成服务数量',
    num:'8,900',
    color:'#ff6262',
    icon:'icon-a-wanchengjilu',
},
])
</script>

<style scoped lang="scss">
.messageCard{
    height: 100px;
    margin: 8px 0 8px 0;
}
</style>